第二十四章笔记

1 避免全局变量

//一个全局变量——我们推荐这样使用
var MyApplication = {
 name: "Nicholas",
 sayName: function(){
 alert(this.name);
 }
};

2 定义常量，我们推荐这样

var Constants = {
 INVALID_VALUE_MSG: "Invalid value!",
 INVALID_VALUE_URL: "/errors/invalid.php"
};
function validate(value){
 if (!value){
 alert(Constants.INVALID_VALUE_MSG);
 location.href = Constants.INVALID_VALUE_URL;
 }
}

3 注意作用域

这里将document用于局部变量，总是有用的，因为我们不需要每次都去作用域链中寻找我们的
全局变量

   function updateUI(){
    var doc = document;
    var imgs = doc.getElementsByTagName("img");
    for (var i=0, len=imgs.length; i < len; i++){
    imgs[i].title = doc.title + " image " + i;
    }
    var msg = doc.getElementById("msg");
    msg.innerHTML = "Update complete.";
   } 
将在一个函数中会用到多次的全局对象存储为局部变量总是没错的。

4 避免属性查找，多次用到一个属性时，应该把它当做一个局部变量使用

一旦多次用到对象属性，应该将其存储在局部变量中。第一次访问该值会是 O(n)，然而后续
的访问都会是 O(1)，就会节省很多。例如，之前的代码可以如下重写：

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

这个版本的代码只有 4 次属性查找，相对于原始版本节省了 33%。在更大的脚本中进行这种
优化，倾向于获得更多改进。

5 避免双重解释

JavaScript 代码想解析 JavaScript 的时候就会存在双重解释惩罚。当使用 eval()函数
或者是Function构造函数以及使用 setTimeout()传一个字符串参数时都会发生这种情况。
下面有一些例子：

//某些代码求值——避免!!
    eval("alert('Hello world!')");
//创建新函数——避免!!
var sayHi = new Function("alert('Hello world!')");
//设置超时——避免!!
setTimeout("alert('Hello world!')", 500);

在以上这些例子中，都要解析包含了 JavaScript 代码的字符串。这个操作是不能在初始的
解析过程中完成的，因为代码是包含在字符串中的，也就是说在 JavaScript 代码运行的同
时必须新启动一个解析器来解析新的代码。
实例化一个新的解析器有不容忽视的开销，所以这种代码要比直接解析慢得多。
对于这几个例子都有另外的办法。只有极少的情况下 eval()是绝对必须的，所以尽可能避免
使用。在这个例子中，代码其实可以直接内嵌在原代码中。对于 Function 构造函数，
完全可以直接写成一般的函数，调用
setTimeout()可以传入函数作为第一个参数。以下是一些例子：

//已修正
alert('Hello world!');
//创建新函数——已修正
var sayHi = function(){
 alert('Hello world!');
};
//设置一个超时——已修正
setTimeout(function(){
 alert('Hello world!');
}, 500);

如果要提高代码性能，尽可能避免出现需要按照 JavaScript 解释的字符串。

6 优化DOM交互

（1）优化DOM交互

最小化现场更新
一旦你需要访问的 DOM 部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。之所
以叫现场更新，是因为需要立即（现场）对页面对用户的显示进行更新。每一个更改，不管是插入单个
字符，还是移除整个片段，都有一个性能惩罚，因为浏览器要重新计算无数尺寸以进行更新。现场更新
进行得越多，代码完成执行所花的时间就越长；完成一个操作所需的现场更新越少，代码就越快。请看
以下例子：
```
var list = document.getElementById("myList"),
item,
i;
for (i=0; i < 10; i++) {
 item = document.createElement("li");
 list.appendChild(item);
 item.appendChild(document.createTextNode("Item " + i));
}
```
这段代码为列表添加了 10 个项目。添加每个项目时，都有 2 个现场更新：一个添加
元素，另
一个给它添加文本节点。这样添加 10 个项目，这个操作总共要完成 20 个现场更新。
要修正这个性能瓶颈，需要减少现场更新的数量。一般有 2 种方法。第一种是将列表从页面上移除，
最后进行更新，最后再将列表插回到同样的位置。这个方法不是非常理想，因为在每次页面更新的时候
它会不必要的闪烁。第二个方法是使用文档片段来构建 DOM 结构，接着将其添加到 List 元素中。这
个方式避免了现场更新和页面闪烁问题。请看下面内容：
就是先一次性建好所有的li再放进去。而不是，建一个，放一个。

var list = document.getElementById("myList"),
 fragment = document.createDocumentFragment(),
 item,
 i;
for (i=0; i < 10; i++) {
 item = document.createElement("li");
 fragment.appendChild(item);
 item.appendChild(document.createTextNode("Item " + i));
}
list.appendChild(fragment);

在这个例子中只有一次现场更新，它发生在所有项目都创建好之后。文档片段用作一个临时的占位
符，放置新创建的项目。然后使用 appendChild()将所有项目添加到列表中。记住，当给 appendChild()
传入文档片段时，只有片段中的子节点被添加到目标，片段本身不会被添加的。
一旦需要更新 DOM，请考虑使用文档片段来构建 DOM 结构，然后再将其添加到现存的文档中。